<template>
  <div class="About">
    <h1>About</h1>
		<h1>{{ $store.state.count }}</h1>
		<button @click="$store.commit('INCREMENT')">count++</button>
		<button @click="INCREMENT">count++</button>
		<ul>
			<li v-for="item of list" :key="item">
				{{item}}
			</li>
		</ul>
		<input type="text" v-model="text">
		<button @click="$store.commit('ADD_ITEM', text)">add item</button>
		<button @click="ADD_ITEM(text)">add item</button>
		{{ infoListNum }}
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from "vuex"
	
export default {
  name: "About",
	computed: {
		...mapGetters(["infoListNum"]),
		...mapState({ list: "infoList" })
		// ...mapState(["infoList"])
	},
	data() {
		return {
			text: "",
			infoList: []
		}
	},
	methods: {
		...mapMutations(["INCREMENT", "ADD_ITEM"])
	}
}
</script>
